---
title: ImageBackground | gluestack-ui
description: ImageBackground is the most fundamental component for building a UI. It is a common feature request from developers familiar with the web is background-image.
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { transformedCode } from '../../../utils';
import {
  AppProvider,
  CodePreview,
  Table,
  TableContainer,
  InlineCode,
} from '@gluestack/design-system';
import { ImageBackground, Text, Heading, Wrapper, View } from './ImageBackground';

<Meta title="ui/Components/React Native Components/ImageBackground" />

# ImageBackground

The most fundamental component for building a UI.

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
      <View h="$96" w="$96">
      <ImageBackground
        source={{ uri: 'https://legacy.reactjs.org/logo-og.png' }}
        style={{ flex: 1, justifyContent: 'center' }}
      >
        <Text
          color="$white"
          fontSize={42}
          lineHeight={84}
          fontWeight="$bold"
          textAlign="center"
          backgroundColor="#000000c0"
        >
          Inside
        </Text>
      </ImageBackground>
    </View>
`,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Text,
        Heading,View,
       ImageBackground,
      },
    }}
  />
</AppProvider>

<br />

> Note: You can refer [here](https://github.com/gluestack/gluestack-ui/tree/main/packages/themed/src/components/ImageBackground/styled-components) to learn about default styling of StatusBar component

### Import

To use this component in your project, include the following import statement in your file.

```bash
import {ImageBackground } from '@gluestack-ui/themed';
```

### Anatomy

The structure provided below can help you identify and understand a badge component's various parts.

```jsx
export default () => <ImageBackground></ImageBackground>;
```

### Props

gluestack-uiImageBackground component is created usingImageBackground component from react-native. It extends all the props supported by [React Native ImageBackground](https://reactnative.dev/docs/ImageBackground#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.

#### ImageBackground

<AppProvider>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Name</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Value</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>children</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>any</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</AppProvider>
